<template>
	<view class="retrieval-write-offs">
		<view class="searchwrapper">
			<view class="search-wrapper flex-align">
				<view class="flex-grow-1 flex-align input" style="margin-right: 20rpx;">
					<van-icon name="search" size="18" color="rgb(25,25,25)" />
					<input v-model="searchValue" placeholder="手机号/卡号" class="flex-grow-1" @confirm='search' />
				</view>
				<view class="flex-grow-1 flex-align input">
					<input v-model="formattedDate" placeholder="选择日期" class="flex-grow-1" disabled
						@click="show1 = true" />
				</view>
				<!-- <van-dropdown-menu>
				<van-dropdown-item title="筛选" ref="filter">
					<filter-list :filterList="filterList" @confirm="onConfirm" @reset="onReset" />
				</van-dropdown-item>
			</van-dropdown-menu> -->
			</view>
			<view class="user flex-align" v-if="!uInfolist">
				<view style="margin-right: 20rpx;">
					<!-- <van-image width="80rpx" height="80rpx" round /> -->
					<image :src="uInfolist.head_pic" mode="" style="width: 80rpx;height: 80rpx;border-radius: 50% 50%;">
					</image>
				</view>
				<view>
					<view class="flex-align">
						<view class="user-name">{{uInfolist.username}}</view>
						<!-- <view class="sex">{{uInfolist}}</view> -->
					</view>
					<view class="tel">{{uInfolist.phone}}</view>
				</view>
			</view>

			<view class="tab-filter" v-if="tabList.length>0">
				<view class="item flex-align tabs">
					<view class="tab-item" :class="{'active': selected_Tab == item.id}" v-for="(item, index) in tabList"
						:key="index" @click="selectedTab(item,index)">
						<text>{{item.title+"("+item.list.length+")"}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-line color="#f2f2f2"></u-line>
		<view class="section_1">
			<view class="list" v-if="selected_Tab == 1 && list.length>0">
				<view v-for="(item, index) in list" :key="index" class="item flex-align"
					:class="{ active: active == index, disabled: item.disableFlag == 1 }"
					@click="item.disableFlag!== 1? write_off(item, index) : ''">
					<view style="display: flex;flex-direction: row;align-items: center;width: 100%;"
						:class="{ 'cursor-not-allowed': item.disableFlag == 1 }">
						<view class="">
							<image style="width:130rpx;height:140rpx;" :src="item.picture" mode=""></image>
						</view>
						<view
							style="display: flex; flex-direction: column; justify-content: space-between;margin-left: 20rpx;width: 100%;"
							:class="{ 'text-gray': item.disableFlag == 1 }">
							<view class="text_12"
								style="margin-top: 10rpx;display: flex; justify-content: space-between;">
								<view class="">
									<text style="margin-right: 10rpx;">{{item.code_no || ''}}</text>
									<text style="margin-right: 10rpx;">{{item.card_type_show || ''}}</text>
								</view>
								<text style="color: #ff4817;">可用：{{item.leftnum || 0}}</text>
							</view>
							<view class="text_12">{{item.ticket_name}} <text
									v-if="item.applicable !== ''">({{item.applicable}})</text> </view>
							<view class="text_12">项目:{{item.projects_text}}</view>
							<view class="text_12">有效期：{{item.startdate}} ~ {{item.enddate}}</view>
							<view class="text_12" v-if="item.sell_start_time">{{item.sell_start_time}} ~
								{{item.sell_end_time}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-if="selected_Tab == 2 && list.length>0">
				<view v-for="(item, index) in list" :key="index" class="item flex-align"
					:class="{ active: active == index, disabled: item.disableFlag == 1 }"
					@click="item.disableFlag!== 1? write_off(item, index) : ''">
					<view style="display: flex;flex-direction: row;align-items: center;width: 100%;"
						:class="{ 'cursor-not-allowed': item.disableFlag == 1 }">
						<view class="">
							<image style="width:130rpx;height:140rpx;" :src="item.picture" mode=""></image>
						</view>
						<view
							style="display: flex; flex-direction: column; justify-content: space-between;margin-left: 20rpx;width: 100%;"
							:class="{ 'text-gray': item.disableFlag == 1 }">
							<view class="text_12"
								style="margin-top: 10rpx;color: #ff4817;display: flex; justify-content: space-between;">
								<text>{{item.code_no || ''}}</text>
								<text>{{item.card_type_show || ''}}</text>
							</view>
							<view class="text_12" style="display: flex; justify-content: space-between;">
								<text>{{item.card_name}}</text>
								<text v-if="item.cardtype == 1 || item.cardtype == 4">余次：{{item.leftnum}}次</text>
								<text v-if="item.cardtype == 2">剩余：{{item.left_time}}天</text>
								<text v-if="item.cardtype == 3">余额：{{item.account_balance}}元</text>
							</view>
							<view class="text_12">项目:{{item.projects_text}}</view>
							<view class="text_12" v-if="item.sales_uname != ''">销售顾问：{{ item.sales_uname }}
							</view>
							<view class="text_12">有效期：{{item.startdate}} ~ {{item.enddate}}</view>
							<view class="text_12" v-if="item.cardstate === 1">{{item.card_state_show}}</view>
							<view class="text_12" v-if="item.cardstate !== 1 && item.cardstate !== 2">
								{{item.card_state_show}}{{item.card_state_show}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-if="selected_Tab == 3&& list.length>0">
				<view v-for="(item, index) in list" :key="index" class="item flex-align"
					:class="{ active: active == index, disabled: item.disableFlag == 1 }"
					@click="item.disableFlag!== 1? write_off(item, index) : ''">
					<view style="display: flex;flex-direction: row;align-items: center;  "
						:class="{ 'cursor-not-allowed': item.disableFlag == 1 }">
						<view class="">
							<image style="width:130rpx;height:140rpx;" :src="item.picture" mode=""></image>
						</view>
						<view
							style="display: flex; flex-direction: column; align-items: baseline; justify-content: space-between;margin-left: 20rpx;"
							:class="{ 'text-gray': item.disableFlag == 1 }">
							<view class="text_12" style="margin-top: 10rpx;color: #ff4817;">{{item.code_no}}
								<text>{{item.card_type_show || ''}}</text>
							</view>
							<view class="text_12">{{item.card_name}}

								<text v-if="item.cardtype == 1 || item.cardtype == 4">余次：{{item.leftnum}}次</text>
								<text v-if="item.cardtype == 2">剩余：{{item.left_time}}天</text>
								<text v-if="item.cardtype == 3">余额：{{item.account_balance}}元</text>
							</view>
							<view class="text_12">持卡人：{{item.username}}
								<text>销售顾问：{{ item.sales_uname }}</text>
							</view>
							<view class="text_12">有效期：{{item.startdate}} ~ {{item.enddate}}</view>
							<view class="text_12" v-if="item.cardstate === 1">{{item.card_state_show}}</view>
							<view class="text_12" v-if="item.cardstate !== 1 && item.cardstate !== 2">
								{{item.card_state_show}}{{item.card_state_show}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-if="selected_Tab == 4&& list.length>0">
				<view v-for="(item, index) in list" :key="index" class="item flex-align"
					:class="{ active: active == index, disabled: item.disableFlag == 1 }"
					@click="item.disableFlag!== 1? write_off(item, index) : ''">
					<view style="display: flex;flex-direction: row;align-items: center;width: 100%;"
						:class="{ 'cursor-not-allowed': item.disableFlag == 1 }">
						<view class="">
							<image style="width:130rpx;height:140rpx;" :src="item.cover" mode=""></image>
						</view>
						<view
							style="display: flex; flex-direction: column;justify-content: space-between;margin-left: 20rpx;width: 100%;"
							:class="{ 'text-gray': item.disableFlag == 1 }">
							<view class="text_12" style="margin-top: 10rpx;">{{item.name}} </view>
							<view class="text_12" style="color: #ff4817;">{{item.item_name}}
							</view>
							<view class="text_12" style="display: flex; justify-content: space-between;width: 100%;">
								<text>已上：{{ item.num }}</text>
								<text>余课：{{item.leftnum}}</text>
							</view>
							<view class="text_12" style="color: #ff4817;">{{item.code_no}}
							</view>
							<view class="text_12" style="display: flex; justify-content: space-between;width: 100%;">
								<text>{{item.class_name || ''}}</text>
								<text style="margin-left: 20rpx;">{{item.student_name || ''}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="btn">
			<van-button round block color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)"
				@click="onClick">去核销</van-button>
		</view> -->
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class=""
				style="width: 45%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				去结账
			</view>
			<view class="" @click="onClick"
				style="width: 45%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				去核销
			</view>
		</view>
		<u-datetime-picker :show="show1" v-model="value1" mode="date" @confirm="timelist1" :minDate="-845628841"
			:maxDate="2856778555000" @cancel="show1 = false"></u-datetime-picker>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				searchValue: '',
				active: null,
				op: '',
				searchKey: "", //搜索关键词
				val: '',
				list: [],
				uInfolist: {},
				code_no: '',
				venue_id: '',
				selected_Tab: 1,
				tabList: [],
				codelist: {},
				mode: 'single', // 日历模式（默认日期选择）
				minDate: new Date('2025-01-01').getTime(), // 示例最小日期
				maxDate: new Date('2050-01-01').getTime(), // 示例最大日期
				show1: false,
				value1: Number(new Date()),
				formattedDate: '',
				currentDate: new Date(),
			}
		},
		onLoad(options) {
			this.venue_id = options.venue_id
			this.op = options.op
		},
		mounted() {
			// 在组件挂载后，格式化当前日期并赋值给formattedDate
			this.formatDate();
		},
		methods: {
			formatDate() {
				const year = this.currentDate.getFullYear();
				// 月份从0开始，所以要加1
				const month = (this.currentDate.getMonth() + 1).toString().padStart(2, '0');
				const day = this.currentDate.getDate().toString().padStart(2, '0');
				// 组合成指定格式的日期字符串
				this.formattedDate = `${year}-${month}-${day}`;
			},
			timelist1(value) {
				this.show1 = false
				let date = new Date(value.value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				console.log(y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s)
				this.formattedDate = y + '-' + MM + '-' + d

				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			selectedTab(item, index) {
				this.active = null;
				this.selected_Tab = item.id
				this.list = item.list
			},
			// 搜索字
			search(val) {
				this.selected_Tab = 1
				this.active = null;
				this.val = val.detail.value
				this.info();
			},
			async info() {
				let that = this;
				let data = {
					code_no: this.val,
					op: this.op,
					venue_id: this.venue_id
				};
				let result = await venues.consumemode(data);
				if (result.code == 1) {
					this.tabList = result.data.tabList
					this.list = result.data.tabList[0].list
					this.uInfolist = result.data.info
				}
			},
			write_off(item, index) {
				if (this.active == index) {
					this.active = null;
					this.code_no = ''
				} else {
					this.active = index
					this.code_no = item.code_no
					this.codelist = item
				}
			},
			onConfirm(filterData) {
				this.$refs.filter.toggle();
			},
			onReset() {
				this.$refs.filter.toggle();
			},
			onClick() {
				if (this.code_no == '') {
					uni.showToast({
						title: '选择产品！',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `./confirm_offs?selectionArr=${encodeURIComponent(JSON.stringify(this.codelist))}` +
						"&selected_Tab=" + this.selected_Tab + "&venue_id=" + this.venue_id + "&formattedDate=" +
						this.formattedDate
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.retrieval-write-offs {
		min-height: 100vh;
		background-color: rgb(243, 243, 243);
		padding-bottom: 130rpx;
		position: relative;

		.searchwrapper {
			position: fixed;
			z-index: 9;
			width: 100%;
			top: 0;
			left: 0;
			background-color: rgb(255, 255, 255);
		}

		.search-wrapper {
			padding: 10rpx 30rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 0px 0px 16rpx 16rpx;


			.input {
				padding: 0 28rpx;
				color: rgb(153, 153, 153);
				font-size: 26rpx;
				background-color: rgba(243, 247, 250, 0.95);
				border-radius: 33rpx;
				height: 66rpx;

				/deep/.van-icon {
					padding: 0 4rpx;
				}
			}

			/deep/.van-dropdown-menu {
				box-shadow: none;
				height: 96rpx;

				.van-dropdown-menu__title {
					color: rgb(99, 93, 247);
				}
			}
		}

		.user {
			padding: 30rpx 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0px 0px 6.48rpx 2.52rpx rgba(0, 0, 0, 0.04);

			.user-name {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 27rpx;
				margin-right: 10rpx;
			}

			.sex {
				color: rgb(153, 153, 153);
				font-size: 22rpx;
				font-weight: 500;
				line-height: 21rpx;
			}

			.tel {
				margin-top: 20rpx;
				color: rgb(51, 51, 51);
				font-size: 22rpx;
				font-weight: 500;
				line-height: 17rpx;
			}
		}

		.section_1 {
			margin-top: 150rpx;
			padding: 20rpx;
		}

		.tab-filter {
			background-color: #ffffff;
			padding: 0 32rpx 20rpx 32rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.tabs {
			display: flex;
			border-bottom: 2rpx solid #f0f0f0;
		}

		.tab-item {
			padding: 16rpx 20rpx;
			margin-right: 32rpx;
			position: relative;
			font-size: 26rpx;
		}

		.tab-item.active {
			color: #2979ff;
		}

		.tab-item.active::after {
			content: '';
			position: absolute;
			bottom: -2rpx;
			left: 0;
			right: 0;
			height: 4rpx;
			background-color: #2979ff;
		}


		.list {
			margin-top: 20rpx;
			padding: 20rpx 10rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 6.48rpx 2.52rpx rgba(0, 0, 0, 0.04);
			border-radius: 10rpx;

			.item.active {
				/* 激活时的样式 */
			}

			.item.disabled {
				/* 禁用时的样式 */
				background-color: #f3f3f3;
				color: #888;
			}

			.cursor-not-allowed {
				cursor: not-allowed;
			}

			.text-gray {
				color: #888;
			}

			.item {
				padding: 15rpx 20rpx;
				border-radius: 15rpx;
				border: solid 5rpx rgb(229, 229, 229);


				&+.item {
					margin-top: 30rpx;
				}

				&.active {
					// background: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391246929552989118.png') left top/100% 100% no-repeat;
					border: 5rpx #2979ff solid;
					// border: none;
				}

				.text_11 {
					font-size: 28rpx;
				}

				.text_12 {
					font-size: 26rpx;
					margin-bottom: 10rpx;
				}

				.text_13 {
					font-size: 26rpx;
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			padding: 0 40rpx;
		}
	}
</style>